<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ajax对象.readyState
        // 用来查看 当前处于ajax的哪个步骤  
        // 0 创建ajax对象成功
        // 1 配置本次请求信息成功
        // 2 本次请求信息成功 响应已经到了浏览器
        // 3 浏览器收到来自服务的响应数据  正在解析   但是还没解析完成  
        // 4 浏览器解析响应的数据完成 可以正常使用 responseText获取数据了


        // 需要通过一个事件 查看状态码 
        // readystatechange 事件
        // ajax 状态发生变化就会触发这个事件 


        // 网络状态码 

        // 200 请求成功 
        // 3开头  重定向   www.360buy.com  => www.jd.com  
        // 4开头  浏览器这边有问题 
        // 5开头  服务器这边有问题 

        const xhr = new XMLHttpRequest();
        // https://home.openweathermap.org/api_keys  获取你的key 
        //https://api.openweathermap.org/data/2.5/weather?q=城市&appid=你申请的apikey
        xhr.open('get', 
        'https://api.openweathermap.org/data/2.5/weather?q=Jinan,%20CN&appid=f465557db70e2a4771ff43a2153048c1',true);

        // xhr.onreadystatechange = function(){
        //     console.log('状态码',xhr.readyState);
        //     if(xhr.readyState === 2){
        //         console.log(xhr.responseText);
        //     }// 2拿不到  
        //     if(xhr.readyState === 3){
        //         console.log(xhr.responseText);
        //     } // 有可能拿不到 
        //     if(xhr.readyState === 4){
        //         console.log(xhr.responseText);
        //     }// 一定能拿到 
        // }
        


        xhr.onreadystatechange = function () {
                // if(xhr.readyState === 4){
                //     console.log(xhr.responseText);
                // }

                if (XMLHttpRequest.DONE === xhr.readyState) {
                    console.log(xhr.status); // 200

                    if (xhr.status) {
                        console.log(xhr.responseText);
                    }
                    else {
                        console.log('网络故障请求失败');
                    }
                }

            }

        

        xhr.send();

        // 上面报一个错误  说没有设置请求头  


    </script>
</body>

</html>